---
title: Front Matter CMS y Astro
description: Añade contenido a tu proyecto Astro usando Front Matter CMS
type: cms
service: Front Matter CMS
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

[Front Matter CMS](https://frontmatter.codes/) trae el CMS a tu editor, se ejecuta dentro de Visual Studio Code, GitPod y muchos más.

## Integración con Astro

En esta sección, veremos cómo agregar Front Matter CMS a tu proyecto de Astro.
 
### Prerrequistos

- Visual Studio Code
- Usa la [plantilla de Astro Blog](https://github.com/withastro/astro/tree/main/examples/blog) para proporcionar la configuración base y el contenido de ejemplo para comenzar con Front Matter CMS.

### Instala la extensión de Front Matter CMS

Puedes obtener la extensión desde la [Plataforma de Visual Studio Code - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) o haciendo clic en el siguiente enlace: [abrir la extensión de Front Matter CMS en VS Code](vscode:extension/eliostruyf.vscode-front-matter)

### Inicialización del proyecto

Una vez instalado Front Matter CMS, obtendrás un nuevo icono en la barra de actividad. Se abrirá el panel **Front Matter CMS** en la barra lateral principal cuando hagas clic en él. Sigue los siguientes pasos para inicializar tu proyecto:

- Haz clic en el botón **Initialize project** en el panel de Front Matter
- La pantalla de bienvenida se abrirá y podrás comenzar a inicializar el proyecto
- Haz clic en el primer paso para **Initialize project**
- Como Astro es uno de los frameworks soportados, puedes seleccionarlo de la lista
- Registra tus carpetas de contenido, en este caso, la carpeta `src/content/blog`.

  :::note
  El registro de la carpeta es necesario para que Front Matter CMS sepa dónde puede encontrar y crear tu contenido. Puedes tener varios tipos de carpetas como páginas, blog, docs y muchos más.
  :::

- Se te pedirá que introduzcas el nombre de la carpeta. De forma predeterminada, toma el nombre de la carpeta.

  :::note
  El nombre se usa durante el proceso de creación de nuevo contenido. Por ejemplo, tener varios registros de carpetas te permite elegir el tipo de contenido que deseas crear.
  :::

- Haz clic en **Start the dashboard** para abrir el panel de contenido

  :::tip
  Una vez que Front Matter CMS es inicializado, puedes abrir el panel de contenido de las siguientes maneras:

  - Usando los combinaciones del teclado: <kbd>alt</kbd> + <kbd>d</kbd> (Windows & Linux) o <kbd>options</kbd> + <kbd>d</kbd> (macOS)
  - Abre la paleta de comandos y busca `Front Matter: Open dashboard`
  - Haz clic en el icono de **Front Matter** en la barra de título del panel o en los archivos.
  :::

### Configuración del proyecto

Una vez que el proyecto esté inicializado, obtendrás un archivo de configuración `frontmatter.json` y una carpeta `.frontmatter` en la raíz de tu proyecto.

<FileTree title="Estructura del proyecto">
- .frontmatter/
  - database/
    - mediaDb.json
- src/
- astro.config.mjs
- **frontmatter.json**
- package.json
</FileTree>

#### Configuración del tipo de contenido

Los tipos de contenido(content-types) son la forma en que Front Matter CMS gestiona tu contenido. Cada tipo de contenido contiene un conjunto de campos, que se pueden definir por tipo de contenido que deseas usar para tu sitio web.

Los campos corresponden al front matter de tu contenido de página.

Puedes configurar los tipos de contenido en el archivo `frontmatter.json`.

- Abre el archivo `frontmatter.json`
- Reemplaza el arreglo `frontMatter.taxonomy.contentTypes` con la siguiente configuración de tipos de contenido:

```json title="frontmatter.json"
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

:::note
Esta configuración asegura que el tipo de contenido de Front Matter coincida con el esquema de la colección de contenido de la plantilla de blog de Astro.
:::

:::tip
Puedes encontraar más información sobre los tipos de contenido y los campos soportados en la [sección de documentación de creación de contenido](https://frontmatter.codes/docs/content-creation) de Front Matter CMS.
:::

### Previsualiza tus artículos en el editor

Desde el panel de **Front Matter CMS**, haz clic en el botón **Start server**. Esta acción inicia el servidor de desarrollo local de Astro. Una vez en ejecución, puedes abrir el panel de contenido, seleccionar uno de los artículos y hacer clic en el botón **Open preview** para abrir el artículo en el editor.

### Crea nuevos artículos

Abre el **Front Matter CMS Dashboard**; puedes hacerlo de la siguiente manera:

- Abre el panel de contenido de Front Matter CMS
- Haz clic en el botón **Create new article**
- Front Matter te preguntará por el título del artículo. Rellénalo y pulsa enter
- Tu nuevo artículo será creado y abierto en el editor. Puedes empezar a escribir tu artículo.

### Usando Markdoc con Front Matter CMS

Para usar Markdoc con Front Matter CMS, debes configurarlo en `frontMatter.content.supportedFileTypes`. Esta configuración le permite al CMS saber qué tipos de archivos puede procesar.

Puedes configurar la opción de la siguiente manera:

```json title="frontmatter.json"
"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]
```

Para permitir que el contenido se cree como Markdoc, especifica la propiedad `fileType` en el tipo de contenido.

```json title="frontmatter.json" ins={7}
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

## Recursos oficiales

- [Front Matter CMS](https://frontmatter.codes/)
- [Front Matter CMS - Documentación](https://frontmatter.codes/docs/)
- [Empezando con Astro y Front Matter CMS](https://youtu.be/xb6pZiier_E)
